<template>
  <el-card shadow="never">

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <el-button  size="small " class="addBtn" type="primary" @click="handleAdd">新增</el-button>
    </div>
    <!-- 主表列表 -->
   <!-- table区域-begin -->
    <div class="project">
      <el-table ref="multipleTable"
                border
                highlight-current-row
                size="small"
                style="width: 100%"
                v-loading="loading"
                :data="dataSource"
                @row-click="rowClick"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :default-sort = "{prop: 'inboundDate', order: 'descending'}">
        <el-table-column align="center" label="#"  width="55">
          <template slot-scope="scope">
            <el-radio v-model="singleSelRowKey" :label="scope.row.id">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="contractNamber" label="合同号"></el-table-column>
        <el-table-column prop="batch" label="批次" sortable></el-table-column>
        <el-table-column prop="inDate"  label="入库日期" sortable></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ ['制定','提交','生效','驳回'][scope.row.state-1] }}
          </template>
        </el-table-column>
        <el-table-column  width="150" fixed="right" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.state == 1 || scope.row.state == 4" >
              <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
              <!-- <span> | </span> -->
              <el-dropdown>
                <span class="el-dropdown-link">
                    <el-button type="text">更多</el-button>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item >
                    <el-popconfirm
                      title="确定提交吗？"
                      placement="top-start"
                      @onConfirm="handleSubmit(scope.row.id)">
                      <el-button  slot="reference"  type="text">提交</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm
                      title="确定删除吗？"
                      placement="top-start"
                      @onConfirm="handleDelete(scope.row.id)">
                      <el-button  slot="reference"  type="text">删除</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div v-else>
              <el-button @click="handleDetail(scope.row)" type="text">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        :total="ipagination.total"
        :page.sync="ipagination.current"
        :limit.sync="ipagination.pageSize"
        @pagination="loadData"
      ></pagination>
    </div>
    <el-tabs value="first">
      <el-tab-pane label="资产明细" name="first">
        <!-- 合同明细列表 -->
        <detail ref="assetItem" ></detail>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增合同弹窗 -->
    <contract-modal ref="modalForm" @ok="modalFormOk" ></contract-modal>
  </el-card>
</template>
<script>
  import { SingleTableMixins } from '@/mixins/SingleTableMixins'
  import Pagination from '@/components/Pagination'
  import AssetModal from '../modules/AssetModal'
  import ContractModal from '../modules/ContractModal'
  import detail from './detail'
  import { putAction,postAction} from '@/api/manage'

  export default {
    mixins: [ SingleTableMixins ],
    components: {detail, ContractModal, Pagination,AssetModal},
    data() {
      return {
        url:{
          list: "/instoreage/list",
          delete: "/instoreage/delete"
        },
        ipagination:{
          pageSize: 10,
          current:1,
          total: 0,
        },
        // 资产数据
        assetData: [],
        multipleSelection: [],

        // 资产图片上传
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        // 上传验收单
        orderVisible: false,

        // 验收单表单
        orderFrom: {
          orderPhoto: '',
        }
      }
    },
    mounted() {

    },
    methods: {
      // 表单选择
      selectChange(e){
        this.$refs.assetItem.getDataByMain(this.singleSelRowKey,this.singleSelRows);
      },
      handleSubmit(id){
        this.loading = true
        putAction("/instoreage/changeState",{id:id,type:2}).then(res =>{
          if(res.success){
            this.$message.success(res.message)
            this.loadData();
          }else{
            this.$message.warning( res.message)
          }
        }).finally(() => {
          this.loading = false
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .addBtn{
    float: left;
    margin-bottom: 15px;
  }
  .el-table{
    border-radius: 7px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
